<template>
<!--  页面最大盒子-->
  <div class="system-all">
<!--    头部最大盒子-->
    <el-row class="search">
      <div style="display: flex;line-height: 60px;">
<!--        头部图片最大的盒子-->
        <div class="icons">
<!--          权限图片-->
          <i class="iconfont icon-quanxian"></i>
        </div>
<!--        头部标题-->
        <span class="icone">用户管理</span>
      </div>
    </el-row>
<!--    头部下面最大的盒子-->
    <div class="bottom-all">
      <!--    左边最大的盒子-->

<!--      右边最大的盒子-->
      <div class="right-all">
     <!--      右边下面最大的盒子-->
        <div class="right-button">
<!--          右下方按钮最大盒子-->
          <div class="button-all">
<!--            右下方按钮大盒子-->

          </div>
<!--          右下方表格最大盒子-->
          <div class="table-all">
            <div>
              <el-table
                  class="table-one"
                  ref="multipleTableRef"
                  :data="d.recodData"
                  @selection-change="handleSelectionChange"
                  :header-cell-style="{
                                fontWeight:'normal',
                                fontSize:'14px',
                                color:'#909399',
                                background:'#EFF3F8',
                              }"
              >
                <el-table-column label="用户ID" property="recordId" width="80"/>
                <el-table-column label="用户名称" property="recordName" width="80" />
                <el-table-column label="部门" property="staffRecordList" width="80">
                  <template #default="scope">
                    {{scope.row.staffRecordList[0].department.departmentName}}
                  </template>
                </el-table-column>
                <el-table-column label="职位" property="address2" width="120">
                  <template #default="scope">
                    {{scope.row.staffRecordList[0].positionTable.positionName}}
                  </template>
                </el-table-column>
                <el-table-column label="用户状态" property="recordState" width="80" >

                  <template #default="scope">
                    <el-switch v-model="scope.row.recordState"
                               :active-value="0"
                               :inactive-value="1">
                    </el-switch>

                  </template>
                </el-table-column>
                <el-table-column property="SysUser" label="账号绑定时间">
                  <template #default="scope">
                    {{scope.row.sysUser==null?"":scope.row.sysUser.createTime}}
                  </template>
                </el-table-column>
                <el-table-column property="address5" label="操作">
                  <template #default="scope">

                  <div style="display: flex">
                      <!--                      右下方表格里面的按钮-->
                      <el-button class="table-buttom" type="primary" @click="roleUserMothed(scope.row)"
                            v-if="scope.row.sysUser!=null"   ><i class="iconfont icon-tianxie"></i>编辑</el-button>
                      <el-button class="table-buttom" type="success" @click="insertUserMothed(scope.row)" v-else-if="scope.row.sysUser==null" ><i class="iconfont icon-shanchu2"></i>绑定</el-button>

                  </div>
                  </template>
                </el-table-column>

              </el-table>
              <el-row justify="center">
                <el-col>
                  <el-pagination
                      v-model:currentPage="d.pageNo"
                      v-model:page-size="d.pageSize"
                      :page-sizes="[5,10, 20, 30, 40]"
                      small="small"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="d.total"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"/>
                </el-col>
              </el-row>
            </div>

          </div>

        </div>
      </div>

    </div>


  </div>
<!--给用户给予角色-->
  <ComplieUserRole :ComplieRoleData="complieRoleData"></ComplieUserRole>
  <InsertUserSystem :InsertUserSystem="insertUserSystemData"></InsertUserSystem>
</template>

<script lang="ts" setup>
import {defineProps, onMounted, reactive, ref} from "vue";
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  recodData: [],
});
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.recodData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}
// 右上方搜索、重置按钮
import {
  Check,
  Delete,
  Edit,
  Message,
  Star,
} from '@element-plus/icons-vue'
// 左边树形结构
import type Node from 'element-plus/es/components/tree/src/model/node'
import axios from "axios";
import ComplieUserRole from "../system/systemVue/ComplieUserRole.vue"
import  InsertUserSystem from "../system/systemVue/InsertUserSystem.vue";
import { useRouter } from "vue-router";
import {ElMessage} from "element-plus";
const router=useRouter()
// 左边的树形结构---全选
interface Tree {
  id: number
  label: string
  isPenultimate?: boolean
  children?: Tree[]
  children1?: Tree[]
}
const v = ref(0);
const insertUserMothed =(data)=>{
  insertUserSystemData.data.userPosition=data.recordId
  insertUserSystemData.dialogVisible = true;
}
//左边的树形结构
const customNodeClass = (data: Tree, node: Node) => {
  if (data.isPenultimate) {
    return 'is-penultimate'
  }
  return null
}
// 左边的树形结构
// #shujuyuan
var fun1 = async function(){
  const url = "http://localhost:1688/recordDubbo/publicRecordDubbo";
  await axios.get(url).then((data)=>{
    var data2=data.data.data
    ALltableData.value = data2;//放入表格
    d.total = data.data.data.length;//获得它的长度
    getTabelData();//调用方法
  });
}
//进来就获取的数据
onMounted(()=>{
  fun1();



})
const complieRoleData=reactive({
  role:[],
  dialogVisible:false,
  userId:0,
  transition:0, //默认新增  1 修改
    }
)
const insertUserSystemData =reactive({
  dialogVisible:false,
  data:{
    userPosition:"",
    userName:"",
    password:""
  }
})
// const recodData = ref([])
const data: Tree[] = [
  {
    id: 1,
    label: '若依科技',
    children: [
      {
        id: 2,
        label: '深圳总公司',
        isPenultimate: true,
        children: [
          {
            id: 2-1,
            label: '研发部',
          },
          {
            id: 2-2,
            label: '市场部门',
          },
          {
            id: 2-3,
            label: '测试部门',
          },
          {
            id: 2-4,
            label: '财务部门',
          },
          {
            id: 2-5,
            label: '市场部门',
          },
        ],
      },
      {
        id: 3,
        label: '长沙分公司',
        isPenultimate: true,
        children: [
          {
            id: 3-1,
            label: '市场部门',
          },
          {
            id: 3-2,
            label: '财务部门',
          },
        ],
      },
    ],
  },
]
//打开给权限赋值角色的方法
const roleUserMothed =(data)=>{
  console.log(data.sysUser!=null)
    complieRoleData.dialogVisible =true;
    complieRoleData.transition=0
    complieRoleData.userId =data.sysUser.id;
  if (data.sysUser){


     const url = `http://localhost:1688/sysUser/userIdRole/${data.sysUser.id}`
    axios.get(url).then((data)=>{
      const val =data.data.data;
      console.log(val.code)
      if(val.code==403){
        ElMessage.error(val.context)
      }else {
        const roleNameList = []

        data.data.data.forEach((data) => {
          roleNameList.push(data.name);
        })
        complieRoleData.role = roleNameList;
      } })


    }
}



// 右上方时间选择器----开始时间
const value1 = ref('')
// 右上方时间选择器----结束时间
const value2 = ref('')

// 右上方的用户状态
const value = ref('Option1')
// 右上方的用户状态
const options = [
  {
    value: 'Option1',
    label: '所有',
  },
  {
    value: 'Option2',
    label: '常用',
  },
  {
    value: 'Option3',
    label: '禁用',
  }
]

</script>

<style scoped>
@import url("../../../public/imgsY/icon/iconfont.css");
/*全局*/
  *{
    padding: 0px;
    margin: 0px;
  }
/*页面最大盒子*/
  .system-all{
    height: 100%;
  }
  /*头部最大盒子*/
    .search{
      border: 1px solid silver;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }
    .el-row{
      padding: 5px 0px;
    }

    /deep/ .el-tabs__header {
      margin-bottom: 0px;
    }
    /*头部图片最大的盒子*/
    .icons{
        width: 50px;
        height: 50px;
        background: dodgerblue;
        text-align: center;
        line-height: 50px;
        /*圆角*/
        border-radius: 40px;
        margin-left: 20px;
    }
    /*权限图片*/
    .icon-quanxian {
        color: white;
        font-size: 24px;
        line-height: 50px;
    }
    /*头部标题*/
    .icone{
        padding-left: 15px;
        line-height: 50px;
    }
    /*头部下面最大的盒子*/
    .bottom-all{
      display: flex;
    }
    /*左边最大的盒子*/
    .left-all{
      height: 600px;
      width: 16%;
      border-left: 1px solid silver;
      border-bottom: 1px solid silver;
    }
    /*左边顶部文字*/
    .wordage-one{
      font-size: 16px;
      height: 40px;
      border-bottom: 1px solid silver;
      line-height: 40px;
      text-align: center;
    }

    /*右边最大的盒子*/
    .right-all{
      width: 100%;
      height: 600px;
    }
    /*右边上面最大的盒子*/
    .right-top{
      border-left:1px solid silver;
      border-right: 1px solid silver ;
      height: 100px;
      margin-left:10px ;
    }
    /*右上横向最大盒子*/
    .wordage-top{
      width: 90%;
      height: 40px;
      display: flex;
      margin-top: 5px;
    }
    /*右边上面的文字*/
    .li-all{
      font-size: 14px;
      width: 265px;
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
      margin-top: 5px;
    }
    /*右上方input盒子*/
    .input-all{
      height: 30px;
      border-radius: 4px;
      width: 180px;
      font-size: 14px;
      border: 1px solid silver;
    }

    /*右上方选择框*/
    .m-2{
      width: 180px;
      height: 30px;
      margin-bottom: 5px;
    }
    /*右上方横杠*/
    .henggang{
      padding-right: 25px;
    }

    /*右边下面最大的盒子*/
    .right-button{
      border:1px solid silver;
      height: 493px;
      margin-left:10px ;
    }
    /*右下方按钮最大盒子*/
    .button-all{
      padding-left: 17px;
      border-bottom: 1px solid silver;
    }
    /*右下方按钮大盒子*/
    .iconfont-all{
      padding-top: 10px;
    }
    /*按钮小盒子*/
    .iconfont-one{
      padding: 10px;
    }
    /*右下方表格最大盒子*/
    .table-all{
      margin-left: 17px;
    }
    /*右下方表格里面的按钮*/
    .table-buttom{
      padding: 0px 10px;
    }

</style>